<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: "家用电器" },
    { value: 27, name: "户外运动" },
    { value: 24, name: "汽车用品" },
    { value: 23, name: "手机数码" },
  ];
  const testDimensions = ["name", "value"];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      top: "5%",
      itemWidth: 10,
      itemHeight: 10,
      data: ["7%~10%", "10%~15%", "15以上", "-10~-20", "-20及以下"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "rgba(10,71,62,0.2)",
          },
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,

          color: "rgba(0,0,0,1)", //X轴文字颜色
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "-20及以下",
        type: "bar",
        barWidth: 15,
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#20C3A7",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          color: "#fff",
        },
        symbolRepeat: "true",
        symbolMargin: 2,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: "start",
        // 	symbolOffset: [0, -15],
        symbolBoundingData: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
        data: [1000, 1000, 1000, 1000, 1000, 1800, 1800],
        width: 25,
        z: 0,
        zlevel: 1,
      },
      {
        name: "-10~-20",
        type: "bar",
        barWidth: 15,
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#249AEC",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },

      {
        name: "15以上",
        type: "bar",
        barWidth: 15,
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#35C03F",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "10%~15%",
        type: "bar",
        barWidth: 15,
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#FFAE00",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "7%~10%",
        type: "bar",
        barWidth: 15,
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#FF7214",
        },
        data: [150, 132, 101, 254, 190, 330, 410],
      },
    ],
  };
});
</script>